<template>
  <div id="app" v-cloak>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { getToken, setToken, removeToken } from "@/utils/auth";
import { initJsSDK } from "./wechat";
export default {
  name: 'App',
  data() {
    return {
      beforeUnload_time: 0,
      gap_time: 0
    }
  },
  mounted() {
    // initJsSDK()
  },
  created() {
    // let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    // //获取当前页面的宽度
    // console.log('width', width);
    
    // let width = document.documentElement.clientWidth
    // if(width == 1360){
    // console.log('width', width);
    //  let c = document.querySelector('body')
    //  let scale = width / 1920
    //  c.style.zoom = scale
    // }
    
    // if (!!window.ActiveXObject || "ActiveXObject" in window) {
    //  if (t != 1) {
    //    // 如果在笔记本中用IE浏览器打开 则弹出提示
    //    alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
    //  }
    // } else {
    //  let c = document.querySelector('body')
    
    //  if (t != 1) {   // 如果进行了缩放，也就是不是1
    //    c.style.zoom = -0.62 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
    //    c.style.height = (1 + (-0.62 * t + 1.55) * 100) + 98.3 + 'vh'   // 也修改页面的高度，这样就不会出现滚动条了';
    
    //    // c.style.transform = `scaleX(1) scaleY(${1+(-0.62 * t + 1.55)})`;
    //  } else {
    //    c.style.height = 100 + 'vh'   // 也修改页面的高度，这样就不会出现滚动条了';
    //  }
    // }
  },
  //    mounted() {
  //       window.onbeforeunload = function (e) {
  //         this.$store.dispatch('user/resetToken')
  //       }
  //   },
  //  destroyed() {
  //     window.removeEventListener('beforeunload', this.beforeunloadFn)
  //   },
  //   methods: {
  //     async beforeunloadFn(e) {
  //        await this.$store.dispatch('user/resetToken')
  //     },

  //   },  
}
</script>

<style lang="less">
@import url("styles/public.css");
@import url("styles/reset.css");
@import url("styles/web.css");
// @import url("styles/animation.css");

[v-cloak] {
  display: none;
}

.el-button--primary {
    background-color: #2b68f6;
    border-color: #2b68f6;
}

/* 聊天 */
.chat {
  // height:500px;
  overflow: auto;
  margin: 37px 0;
  // background: rgba(247, 249, 252, 1);
  // padding: 30px;
  position: relative;

  .addChat {
    width: 90%;
    position: absolute;
    bottom: 33px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.chat-item {
  position: relative;
  padding: 10px 60px;
  min-height: 60px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 40px;

  .user {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    .avatar {
      display: block;
      width: 53px;
      height: 53px;
      border-radius: 5px;
    }
  }

  .meta {
    font-size: 14px;
    // padding: 0 0 10px;
    // display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    .hd {}

    .name {
      font-weight: 600;
      font-size: 13px;
      vertical-align: bottom;
    }

    .time {
      padding: 0 17px;
      margin: 5px 0;
      font-size: 14px;
      color: #9A9A9A;
    }

    .level-icon {
      width: 20px;
      vertical-align: middle;
      display: inline-block;
      margin-right: 7px;
    }
  }

  .content {
    text-align: left;
    position: relative;
    display: inline-block;
    max-width: 400px;
    min-width: 80px;
    min-height: 36px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
    padding: 7px 10px;
    border-radius: 3px;
    color: #9A9A9A;
    background-color: #fff;
    word-break: break-all;
    border-radius: 10px;
    border: 1px solid #D6D6D6;

    &::after {
      content: "";
      position: absolute;
      top: 15px;
      width: 0;
      height: 0;
      border-style: solid dashed dashed;
      border-color: #fff transparent transparent;
      overflow: hidden;
      border-width: 10px;
    }

    &.text {
      white-space: pre-line;
      user-select: all;
    }

    &.img,
    &.video {
      background: none;
      padding: 0;
      overflow: hidden;

      &::after {
        display: none;
      }

      img {
        display: block;
        max-height: 120px;
        max-width: 100%;
      }
    }
  }

  &.left {
    text-align: left;

    .user {
      left: 8px;
    }

    .meta {
      flex-direction: row;

      .label {
        margin-right: 5px;
      }
    }

    .content {
      &::after {
        left: -10px;
      }
    }
  }

  &.right {
    text-align: right;

    .user {
      right: 8px;
    }

    .meta {
      flex-direction: row-reverse;

      .label {
        margin-left: 5px;
      }
    }

    .content {
      &::after {
        right: -10px;
      }
    }
  }
}

.right .content {
  left: -12px;
  top: 10px;
}

.left .name {
  margin-left: 17px;
}

.left .content {
  left: 12px;
  top: 10px;
}

/* 聊天 */
</style>
